<template>
  <div>
    <el-radio-group style="margin-bottom: 10px" v-model="radio1" size="small">
      <el-radio-button label="月日均" />
      <el-radio-button label="年日均" />
      <el-radio-button label="资产负债余额" />
    </el-radio-group>
    <el-row>
      <el-col :span="10">
        <p class="chartTipsP">全行资产月日均分布比例</p>
        <div class="pie" id="echartPie"></div>
      </el-col>
      <el-col :span="14">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="全行" name="first"></el-tab-pane>
          <el-tab-pane label="支行" name="second"></el-tab-pane>
          <el-tab-pane label="上年" name="third"></el-tab-pane>
        </el-tabs>
        <el-descriptions :column="2" class="leveDiv" border>
          <el-descriptions-item
            v-for="(item, index) in descriptionsItems"
            :key="index"
            :label="item.label"
            :span="1"
          >
            <span>{{ valueObj[item.tipsCode] }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
    <el-divider />
    <el-row>
      <el-col :span="10">
        <div id="container" class="container">
          <div class="yuan">
            <el-image
              style="width: 320px; height: 320px"
              src="/@/assets/img/allYuan.png"
              fit="fill"
            />
          </div>
          <div id="dot" class="dot"></div>
          <div class="box">
            <el-image class="img" src="/@/assets/img/保险.png" fit="fill" />
            <span>保险</span>
          </div>
          <div class="box">
            <el-image class="img" src="/@/assets/img/理财.png" fit="fill" />
            <span>理财</span>
          </div>
          <div class="box">
            <el-image class="img" src="/@/assets/img/定期.png" fit="fill" />
            <span>存款</span>
          </div>
          <div class="box">
            <el-image class="img" src="/@/assets/img/消费贷款.png" fit="fill" />
            <span>贷款</span>
          </div>
          <div class="box">
            <el-image class="img" src="/@/assets/img/贵金属.png" fit="fill" />
            <span>贵金属</span>
          </div>
          <div class="box">
            <el-image class="img" src="/@/assets/img/基金.png" fit="fill" />
            <span>基金</span>
          </div>
          <div class="box">
            <el-image class="img" src="/@/assets/img/资管计划.png" fit="fill" />
            <span>代销信托</span>
          </div>
          <!-- /资管计划 -->
          <div class="box">
            <el-image class="img" src="/@/assets/img/代销理财.png" fit="fill" />
            <span>代销理财</span>
          </div>
        </div>
      </el-col>
      <el-col :span="14">
        <div class="lineDiv" id="echartLine"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
function floatPoint(num) {
  if (!num) {
    return "0.00";
  } else {
    return parseFloat(num).toLocaleString(undefined, {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });
  }
}
export default {
  setup() {
    const radio1 = ref("月日均");
    const activeName = ref("");
    const descriptionsItems = ref([]);
    const valueObj = ref({
      Allmonth: "1231111111",
      Allmonth1: "1231111111",
      Allmonth2: "1231111111",
      Allmonth3: "1231111111",
      Allmonth4: "1231111111",
      Allmonth5: "1231111111",
      Allmonth6: "1231111111",
      Allmonth7: "1231111111",
      Allmonth8: "1231111111",
      Childmonth: "child1231111111",
      Childmonth1: "child1231111111",
      Childmonth2: "child1231111111",
      Childmonth3: "child1231111111",
      Childmonth4: "child1231111111",
      Childmonth5: "child1231111111",
      Childmonth6: "child1231111111",
      Childmonth7: "child1231111111",
      Childmonth8: "child1231111111",
      LastYearmonth: "LastYear1231111111",
      LastYearmonth1: "LastYear1231111111",
      LastYearmonth2: "LastYear1231111111",
      LastYearmonth3: "LastYear1231111111",
      LastYearmonth4: "LastYear1231111111",
      LastYearmonth5: "LastYear1231111111",
      LastYearmonth6: "LastYear1231111111",
      LastYearmonth7: "LastYear1231111111",
      LastYearmonth8: "LastYear1231111111",
    });
    const descriptionsItemsAll = ref([
      { label: "存款月日均", tipsCode: "Allmonth" },
      { label: "总资产月日均", tipsCode: "Allmonth1" },
      { label: "理财月日均", tipsCode: "Allmonth2" },
      { label: "代销理财月日均", tipsCode: "Allmonth3" },
      { label: "基金月日均", tipsCode: "Allmonth4" },
      { label: "代销信托/资管计划月日均", tipsCode: "Allmonth5" },
      { label: "贷款月日均", tipsCode: "Allmonth6" },
      { label: "结构性存款月日均", tipsCode: "Allmonth7" },
      { label: "当月贵金属销量", tipsCode: "Allmonth8" },
    ]);
    const descriptionsItemsChild = ref([
      { label: "存款月日均", tipsCode: "Childmonth" },
      { label: "总资产月日均", tipsCode: "Childmonth1" },
      { label: "理财月日均", tipsCode: "Childmonth2" },
      { label: "代销理财月日均", tipsCode: "Childmonth3" },
      { label: "基金月日均", tipsCode: "Childmonth4" },
      { label: "代销信托/资管计划月日均", tipsCode: "Childmonth5" },
      { label: "贷款月日均", tipsCode: "Childmonth6" },
      { label: "结构性存款月日均", tipsCode: "Childmonth7" },
      { label: "当月贵金属销量", tipsCode: "Childmonth8" },
    ]);
    const descriptionsItemsLastYear = ref([
      { label: "存款月日均", tipsCode: "LastYearmonth" },
      { label: "总资产月日均", tipsCode: "LastYearmonth1" },
      { label: "理财月日均", tipsCode: "LastYearmonth2" },
      { label: "代销理财月日均", tipsCode: "LastYearmonth3" },
      { label: "基金月日均", tipsCode: "LastYearmonth4" },
      { label: "代销信托/资管计划月日均", tipsCode: "LastYearmonth5" },
      { label: "贷款月日均", tipsCode: "LastYearmonth6" },
      { label: "结构性存款月日均", tipsCode: "LastYearmonth7" },
      { label: "当月贵金属销量", tipsCode: "LastYearmonth8" },
    ]);
    const chartOptions = reactive({
      commandPieChartOption: {
        legend: {
          show: true,
          bottom: 0,
          icon: "circle",
          // right:'0%',
          // top:'20%',
          // width:'120px'
        },
        color: ["#2c89ec", "#39bdc6", "#2ca761", "#ffbb3e", "#f1627a", "#965fe4"],
        series: [
          {
            type: "pie",
            name: "",
            radius: ["30%", "50%"],
            label: {
              show: true,
              color: "#333",
              fontSize: 13,
              formatter: (item) => {
                return item.name + " " + item.percent + "%";
              },
            },
            data: [
              { value: 10480, name: "存款" },
              { value: 73500, name: "理财" },
              { value: 58000, name: "基金" },
              { value: 48400, name: "当年保险" },
              { value: 30000, name: "代销理财" },
              { value: 30000, name: "当月贵金属" },
              { value: 30000, name: "代销信托/资管计划" },
            ],
          },
        ],
        tooltip: {
          axisPointer: {
            type: "none",
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#333",
            fontSize: 14,
          },
          extraCssText:
            "box-shadow: 0 0 20px rgb(195, 219, 248, 1);border-radius: 10px;padding: 15px 10px",
          formatter: (item) => {
            let amount = "0.00";
            if (item.value > 0) {
              amount = `${floatPoint(item.value / 10000)}万元`;
            }
            return `${item.name} ${amount}`;
          },
        },
      },
      commandLineChartOption: {
        title: {
          show: true,
          text: "贷款余额趋势图",
        },
        grid: {
          right: 5,
          left: 100,
          bottom: 80,
        },
        xAxis: {
          data:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              // x轴线条颜色
              color: "#f3f3f3",
              width: 2,
            },
          },
          axisLabel: {
            // x轴刻度字体颜色
            color: "#333",
            fontSize: 14,
            fontWeight: 500,
          },
        },
        yAxis: {
          // 单位(元)
          type: "value",
          name: "",
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#333",
            fontSize: 14,
            fontWeight: 500,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#f3f3f3",
              width: 2,
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#333",
            fontSize: 14,
          },
          extraCssText:
            "box-shadow: 0 0 20px rgb(195, 219, 248, 1);border-radius: 10px;padding: 15px 10px",
        },
        legend: {
          show: true,
        },
        series: [
          {
            data:[120, 132, 101, 134, 90, 230, 210],
            type: "line",
            name: "贷款余额（元）",
            itemStyle: {
              normal: {
                color: "#336beb",
                lineStyle: {
                  width: 3,
                },
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#c3dbf8",
                  },
                  {
                    offset: 1,
                    color: "#fff",
                  },
                ]),
              },
            },
          },
          {
            data:[220, 182, 191, 234, 290, 330, 310],
            type: "line",
            name: "存款余额（元）",
            itemStyle: {
              normal: {
                color: "#336beb",
                lineStyle: {
                  width: 3,
                },
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#c3dbf8",
                  },
                  {
                    offset: 1,
                    color: "#fff",
                  },
                ]),
              },
            },
          },
        ],
      },
    });

    watch(activeName, (val) => {
      if (val == "first") {
        descriptionsItems.value = descriptionsItemsAll.value;
      }
      if (val == "second") {
        descriptionsItems.value = descriptionsItemsChild.value;
      }
      if (val == "third") {
        descriptionsItems.value = descriptionsItemsLastYear.value;
      }
    });
    const initRadiusDiv = () => {
      let dot = document.getElementById("dot");
      //中心点横坐标
      let dotLeft =
        (document.getElementById("container").offsetWidth -
          document.getElementById("dot").offsetWidth) /
          2 -
        80; //- 40
      //中心点纵坐标
      let dotTop =
        (document.getElementById("container").offsetHeight -
          document.getElementById("dot").offsetHeight) /
          2 -
        40;
      //起始角度
      let stard = 0;
      //半径
      let radius = 200;
      //每一个BOX对应的角度;
      let avd = 360 / document.getElementsByClassName("box").length + stard;
      //每一个BOX对应的弧度;
      let ahd = (avd * Math.PI) / 180;
      //设置圆的中心点的位置
      // $(".dot").css({"left":dotLeft,"top":dotTop});
      dot.style.left = dotLeft + "px";
      dot.style.top = dotTop + "px";

      let boxes = document.getElementsByClassName("box");
      for (let index = 0; index < boxes.length; index++) {
        boxes[index].style.left = Math.sin(ahd * index) * radius + dotLeft + "px";
        boxes[index].style.top = Math.cos(ahd * index) * radius + dotTop + "px";
      }
    };
    return {
      radio1,
      chartOptions,
      activeName,
      descriptionsItems,
      descriptionsItemsAll,
      descriptionsItemsChild,
      descriptionsItemsLastYear,
      valueObj,
      initRadiusDiv,
    };
  },
  mounted() {
    const echartPie = document.getElementById("echartPie");
    const commandPieChart = echarts.init(echartPie);
    commandPieChart.setOption(this.chartOptions.commandPieChartOption);


    const echartLine = document.getElementById("echartLine");
    const commandLineChart = echarts.init(echartLine);
    commandLineChart.setOption(this.chartOptions.commandLineChartOption);
    this.activeName = "first";
    this.initRadiusDiv();
  },
};
</script>
<style lang="scss" scoped>
.pie {
  height: 350px;
  width: 40vw;
}
.lineDiv {
  width: 58vw;
  height: 450px;
}
.chartTipsP {
  font-weight: 600;
  font-size: 14px;
  color: #495169;
}
.dot {
  position: absolute;
  span {
    font-size: 16px;
    color: #697dbb;
  }
}
.container {
  width: 100%;
  height: 460px;
  position: relative;
  .yuan {
    position: absolute;
    top: 15%;
    left: 14%;
  }
}
.box {
  width: 60px;
  height: 60px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  .img {
    width: 40px;
    height: 40px;
  }
}
</style>
